import React from 'react'
import { SafeAreaView, ScrollView, View, Text } from 'react-native'
import { useDispatch } from 'react-redux'
import { useNavigation, CommonActions } from '@react-navigation/native'
import { Toast } from 'native-base'
import { Image, ListItem, Button } from 'react-native-elements'
import * as userActions from '@/actions/user'
import styles from './styles'

const rightIcon = require('@/assets/images/icon-right.png')

const navList = [
  {
    name: '手机号码修改',
    url: 'VerifyMobile'
  },
  // {
  //   name: '绑定微信号',
  //   url: ''
  // },
  {
    name: '更改密码',
    url: 'ChangePsd'
  },
  {
    name: '清理缓存',
    url: 'clearCache'
  }
]

const Setting = () => {
  const dispatch = useDispatch()
  const navigation = useNavigation()
  const onGoPage = item => {
    if (item.url === 'clearCache') {
      global.storage.clearMapForKey('historyList')
      setTimeout(() => {
        Toast.show({
          text: '清理成功',
          duration: 1500
        })
      }, 1500)
    } else {
      if (item.url) {
        navigation.navigate(item.url)
      }
    }
  }

  const _logOut = () => {
    dispatch(userActions.logout())
    navigation.dispatch(CommonActions.navigate('Home'))
  }

  const _openUrl = (url, title) => {
    navigation.navigate('Webview', {
      url: url,
      title: title
    })
  }

  return (
    <>
      <SafeAreaView style={styles.wrap}>
        <ScrollView
          style={styles.container}
          contentInsetAdjustmentBehavior="automatic"
        >
          <View style={styles.menuBox}>
            {navList.map((item, index) => {
              return (
                <ListItem
                  key={index}
                  title={item.name}
                  onPress={() => onGoPage(item)}
                  contentContainerStyle={styles.listContentContainer}
                  bottomDivider={!(index === navList.length - 1)}
                  rightIcon={
                    <Image source={rightIcon} style={styles.rightIcon} />
                  }
                />
              )
            })}
          </View>
          <Button
            onPress={_logOut}
            buttonStyle={styles.button}
            title="退出登录"
            titleStyle={styles.buttonText}
          />

          <View style={styles.footer}>
            <Text style={styles.footerText}>
              <Text
                style={styles.linkText}
                onPress={() =>
                  _openUrl('https://wap.sctynews.cn/#/clause', '服务协议')
                }
              >
                服务协议
              </Text>{' '}
              |{' '}
              <Text
                style={styles.linkText}
                onPress={() =>
                  _openUrl('https://wap.sctynews.cn/#/privacy', '隐私政策')
                }
              >
                隐私政策
              </Text>
            </Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  )
}

export default Setting
